<script setup lang='ts'>
import { ref } from "vue"
import type { Ref } from "vue";
defineOptions({
  name: 'vtTheme',
})

const dark: Ref<boolean> = ref(false)

function handleClick() {
  dark.value = !dark.value
  if (dark.value) {
    document.getElementsByTagName("HTML")[0].classList.add("dark")
  } else {
    document.getElementsByTagName("HTML")[0].classList.remove("dark")
  }
}

</script>

<template>
  <div class='vt-theme__container'>
    <vt-icon icon="sun" v-if="!dark" @click="handleClick" />
    <vt-icon icon="moon" v-else @click="handleClick" />
  </div>
</template>

<style scoped lang='scss'></style>